<template>
  <section @click="clickCurrent('current')" @mousedown="clickCurrent('dragging')">
    <div :class="['custorm--modelbox', 'graphicmagicsquare-show', (custormCurrent == custormIndex)?'drag active':'drag']">
      <div v-if="custormItemData.params.isshow == '2'" class="noshow" v-bind:style="{'background-image':`url(${getPath('noshow.png')})`}"></div>
      <div style="overflow: hidden;width:373px;" :style="{'padding': `${custormItemData.style.gap}px`,'height':`${isCurrentPage?'373px':`${countH}px`}`}">
        <div class="fui-cube" :style="{'width': `calc(373px - ${custormItemData.style.gap*2}px)`, 'height':`${`calc(373px - ${custormItemData.style.gap*2}px)`}`}">
          <div class="fui-cube-item" v-if="custormItemData.style.display =='auto' && finishItem.data" v-for="(finishItem, finishIndex) in (custormItemData.data?custormItemData.data:[])" :key="finishIndex" v-bind:style="{'top':`${(finishItem.data.beginStart-1)/4*100}%`,'left':`calc(${(finishItem.data.beginOver-1)/4*100}%)`,'width':`calc(${(finishItem.data.endOver-finishItem.data.beginOver+1)/4*100}%)`,'height':`calc(${(finishItem.data.endStart-finishItem.data.beginStart+1)/4*100}%)`}">
            <div class="fui-cube-maker" v-bind:style="{'top':0,'left':0,'right':0,'bottom':0,'background-image':`url(${getPath(finishItem.data.thumb.file_path)})`,'margin':margingap(finishIndex,custormItemData,finishItem)}">
              <!-- {{custormItemData.style.display =='auto' && (isCurrentPage || (!isCurrentPage && (finishItem.data.endOver-finishItem.data.beginOver+1 !=4 && finishItem.data.thumb.file_path != '')))}} -->
              <!-- {{custormItemData.style.display =='auto' && (isCurrentPage || (!isCurrentPage && ((finishItem.data.endOver-finishItem.data.beginOver+1 != 4 || (finishItem.data.endOver-finishItem.data.beginOver+1 == 4)) && finishItem.data.thumb.file_path != '')))}} -->
            </div>
          </div>
          <div class="fui-cube-item" v-if="custormItemData.style.display !='auto'" v-for="(finishItem, finishIndex) in custormItemData.data" :key="finishIndex" v-bind:style="{'top':`${finishItem.style.top}`,'left':`${finishItem.style.left}`,'width':`calc(${finishItem.style.width})`,'height':`calc(${finishItem.style.height})`,'zoom': `calc(${(373 - custormItemData.style.gap*2)/280})`}">
            <div class="fui-cube-maker" v-bind:style="{'top':0,'left':0,'right':0,'bottom':0,'background-image':`url(${getPath(finishItem.data.thumb.file_path)})`,'margin':margingap(finishIndex,custormItemData)}">
            </div>
          </div>
        </div>
      </div>

      <div class="btn-edit-del" @click="delCurrent"><span class="btn-del iconfont icon icon-close"></span></div>
    </div>
  </section>
</template>

<script>
import defaultConfig from './utils/showConfig'
export default {
  mixins: [defaultConfig.mixins],
  data() {
    return {
      countH: 373,
      scaleW: 373 - 280,
      markerW: 373 / 16,
      markerH: 373 / 16
    }
  },
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  watch: {
    'isCurrentPage': {
      handler(newData, oldData) {
        if (!!this.custormItemData.data && Array.isArray(this.custormItemData.data)) {
          const $data = this.custormItemData.data.reverse()
          if (Array.isArray($data) && $data.length > 0 && this.custormItemData.style.display === 'auto') {
            let maxEnd = 0
            console.log($data, 'isCurrentPage')
            $data.map((finishItem, finishIndex) => {
              if (finishItem.data && Number(finishItem.data.endStart) > maxEnd) {
                maxEnd = Number(finishItem.data.endStart)
              }
            })
            this.countH = (373 * 0.25 * maxEnd)
          }
          console.log(this.custormItemData.data)
        }
      },
      immediate: true,
      deep: false
    }
  },
  computed: {
    isCurrentPage() {
      return this.custormCurrent === this.custormIndex
    },
    margingap: () => {
      return function(index, custormItemData, finishItem) {
        let margin = '0'
        const gapw = custormItemData.style.gap / 2

        if (custormItemData.style.display === 'auto') {
          margin = `${gapw * 2}px`
        } else if (custormItemData.style.display === '1') {
          if (index === 0) {
            margin = `0 0 ${gapw}px 0`
          } else if (index === 1) {
            margin = `${gapw}px 0 0 0`
          }
        } else if (custormItemData.style.display === '2') {
          if (index === 0) {
            margin = `0 ${gapw}px 0  0`
          } else if (index === 1) {
            margin = `0 0 0 ${gapw}px`
          }
        } else if (custormItemData.style.display === '3') {
          if (index === 0) {
            margin = `0 ${gapw}px 0  0`
          } else if (index === 1) {
            margin = `0 ${gapw}px 0 ${gapw}px`
          } else if (index === 2) {
            margin = `0 0 0 ${gapw}px`
          }
        } else if (custormItemData.style.display === '4') {
          if (index === 0) {
            margin = `0 ${gapw}px ${gapw}px  0`
          } else if (index === 1) {
            margin = `0  0 ${gapw}px ${gapw}px`
          } else if (index === 2) {
            margin = `${gapw}px 0 0 0`
          }
        } else if (custormItemData.style.display === '5') {
          if (index === 0) {
            margin = `0 0 ${gapw}px 0`
          } else if (index === 1) {
            margin = `${gapw}px ${gapw}px  0  0`
          } else if (index === 2) {
            margin = `${gapw}px 0 0 ${gapw}px`
          }
        } else if (custormItemData.style.display === '6') {
          if (index === 0) {
            margin = `0 ${gapw}px ${gapw}px 0`
          } else if (index === 1) {
            margin = `${gapw}px ${gapw}px  0  0`
          } else if (index === 2) {
            margin = `0 0 0 ${gapw}px`
          }
        } else if (custormItemData.style.display === '7') {
          if (index === 0) {
            margin = `0 ${gapw}px 0 0`
          } else if (index === 1) {
            margin = `0 0 ${gapw}px ${gapw}px`
          } else if (index === 2) {
            margin = `${gapw}px 0 0 ${gapw}px`
          }
        } else if (custormItemData.style.display === '8') {
          if (index === 0) {
            margin = `0 ${gapw}px ${gapw}px 0`
          } else if (index === 1) {
            margin = `0 0 ${gapw}px ${gapw}px`
          } else if (index === 2) {
            margin = `${gapw}px ${gapw}px 0 0`
          } else if (index === 3) {
            margin = `${gapw}px 0 0 ${gapw}px`
          }
        } else if (custormItemData.style.display === '9') {
          if (index === 0) {
            margin = `0 ${gapw * 0.75}px ${gapw / 2}px 0`
          } else if (index === 1) {
            margin = `0 0 ${gapw / 2}px ${gapw * 0.75}px`
          } else if (index === 2) {
            margin = `${gapw}px ${gapw}px 0 0`
          } else if (index === 3) {
            margin = `${gapw}px ${gapw / 2}px 0 ${gapw / 2}px`
          } else if (index === 4) {
            margin = `${gapw}px 0 0 ${gapw}px`
          }
        } else if (custormItemData.style.display === '10') {
          if (index === 0) {
            margin = `0 ${gapw}px 0 0`
          } else if (index === 1) {
            margin = `0 0 ${gapw}px ${gapw}px`
          } else if (index === 2) {
            margin = `${gapw}px ${gapw / 2}px 0 ${gapw}px`
          } else if (index === 3) {
            margin = `${gapw}px 0 0 ${gapw * 1.5}px`
          }
        }
        return margin
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.graphicmagicsquare-show {
  .fui-cube {
    position: relative;
    // left: 12px;
    .fui-cube-item,
    .fui-cube-maker {
      position: absolute;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50%;
      overflow: hidden;
    }
  }
}
</style>
